/**
* 组件-菜单栏
*
**/
<template>
  <template v-for="menu in props.menus">
    <template v-if="menu.children && menu.children.length > 0">
      <el-sub-menu :index="menu.path" :key="menu.path">
        <template #title>
          <el-icon>
            <location/>
          </el-icon>
          <span>{{ menu.meta.title }}</span>
        </template>
        <menu-item :menus="menu.children"/>
      </el-sub-menu>
    </template>
    <template v-else>
      <el-menu-item :index="menu.path" :key="menu.path" @click="onClickMenu(menu)">
        <el-icon>
          <TakeawayBox/>
        </el-icon>
        <span>{{ menu.meta.title }}</span>
      </el-menu-item>
    </template>
  </template>
</template>

<script lang='ts' setup>
import {RouteRecordRaw} from 'vue-router'
import router from "../router";

interface Props {
  menus: RouteRecordRaw[]
}

const props = withDefaults(defineProps<Props>(), {
  menus: () => [],
})
const onClickMenu = (menu: RouteRecordRaw) => {
  router.push(menu.path)

}
</script>

<style scoped lang='less'>
//导航栏
.el-sub-menu .icon,
.el-menu-item .icon {
  vertical-align: middle;
  margin-right: 0.05rem;
  width: 0.24rem;
  text-align: center;
}

.is-active > .icon {
  color: #409eff;
}

.el-menu-item.is-active {
  //background-color: #2F4156;
}

</style>